<template>
  <div class="details">
    <div class="admin-box">
      <!--头像-->
      <div class="admin-img" @click="imgshow = true">
        <img :src="beautyMsg.img" alt="#">
      </div>
      <!--名字-->
      <div class="admin-name">
        <span v-text="beautyMsg.self_no+ '.'+beautyMsg.name"></span>
      </div>
      <!--宣言-->
      <p class="admin-of" v-text="beautyMsg.short_intro"></p>
      <!--选手自己看自己-->
      <div>
        <div v-show="beautyMsg.vote_num" class="votes">票数：{{beautyMsg.vote_num}}票</div>
        <div class="votesR">
          <span v-show="rankVote.rank">当前第{{rankVote.rank}}名</span>
          <span>距离上一名差：{{rankVote.pre_vote_num}}票</span>
        </div>
      </div>
    </div>
    <!--个人介绍-->
    <div class="admin-introduce container" v-text="beautyMsg.remark">
    </div>
    <!--获取票数-->
    <div class="get-votes container">
      <router-link tag='button' to='/getFansCard?liren=0'>
        为自己加票
      </router-link>
      <button @click='shareStatus = true'>拉票</button>
    </div>
    <!--点击分享-->
    <x-dialog v-model='shareStatus'
              :dialog-style="{'max-width': '100%', 'width': '100%', 'height': '100%', 'background-color': 'transparent','position': 'absolute','color':'#fff'}"
              :scroll='false'>
      <div class="dialogue">每天分享到朋友圈或微信群 邀请他人为自己投票 同时可为自己加上一票
      </div>
      <div class="arrow"></div>
      <span class="cancel" @click='shareStatus = false'>取消</span>
    </x-dialog>
    <x-dialog v-model="imgshow" hide-on-blur
              :dialog-style="{'max-width': '80%', width: '80%', height: '60%', 'background-color': 'transparent'}">
      <div><img style="width: 100%;height: 100%;display: block" :src="beautyMsg.img_big"></div>
    </x-dialog>
  </div>
</template>

<script>
  import {getBeautyMsg, getDisVotes, getConfig, shareCallback} from '../../api'
  import {XDialog} from 'vux'
  import {mapState} from  'vuex'
  export default {
    data() {
      return {
        // 分享显示状态
        shareStatus: false,
        // 个人信息
        beautyMsg: '',
        // 距离上一名
        rankVote: {},
        imgshow: false
      }
    },
    methods: {
      // 获取个人信息
      _getBeautyMsg(){
        this.$http.get(getBeautyMsg(this.$route.query.id)).then(res => {
          this.beautyMsg = res.data.data;
        })
      },
      // 获取距离上一名票数
      _getDisVotes(){
        this.$http.get(getDisVotes(window.localStorage.getItem('token'), this.$route.query.id)).then(res => {
          this.rankVote = res.data.data;
        })
      }
    },
    created(){
      this._getBeautyMsg();
      this._getDisVotes();
      var link = window.location.host + '/#/details?id=' + this.$route.query.id;
      this.wxShare('这一次,我想和你一起走在美丽的路上', '我正在参加中国丽人秀海选盛典,诚请你为我投上宝贵的一票', link)
    },
    components: {
      XDialog
    },
    computed: {
      ...mapState({
        isShare: state => state.vux.isShare,
      })
    },
    watch: {
      isShare: function () {
        if (this.isShare) {
          this._getBeautyMsg();
          this._getDisVotes();
        }
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  @col: #ed007c;
  .details {
    background: #f5f5f5;
  }

  .admin-box {
    background: #fff;
    margin-bottom: 5px;
    text-align: center;
    .admin-img {
      background: url("../../../static/images/bg.png") no-repeat;
      background-size: cover;
      height: 6.4rem;
      width: 6.4rem;
      border-radius: 10px;
      overflow: hidden;
      margin: 15px auto 10px auto;
      img {
        width: 100%;
        display: block;

      }
    }
    .admin-name {
      font-size: 17px;
      color: #666;
    }
    .admin-of {
      font-size: 12px;
      color: #999;
      margin: 0 15px 15px 15px;
    }
  }

  .admin-introduce {
    font-size: 13px;
    color: #333;
    background: #fff;
    padding-top: 10px;
  }

  // 按钮
  .vote-btn-s {
    background: #ed007c;
    width: 40%;
    height: 40px;
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
  }

  .vote-btn-s:active {
    background: #b10062;
  }

  .get-votes {
    background: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    button {
      border-radius: 5px;
    }
    button:first-child {
      height: 38px;
      line-height: 38px;
      box-sizing: border-box;
      border: 1px solid #ff88c6;
      width: 60%;
      color: #ee2687;
      background-color: #fff;
    }
    button:nth-child(2) {
      width: 35%;
      background-color: #ed007c;
      color: #fff;
    }
  }

  // 票数
  .votes {
    color: #ed007c;
    font-size: 15px;
    text-align: center
  }

  .votesR {
    font-size: 13px;
    color: #333;
    width: 100%;
    padding: 7px 0;
    > span:first-child {
      margin-right: 50px;
    }
  }

  .dialogue {
    box-sizing: border-box;
    margin: 75px auto 0;
    background: url('../../../static/images/wznrk.png') no-repeat;
    width: 248px;
    height: 105px;
    padding: 20px 25px 0px 25px;
    background-size: cover;
    font-size: 15px;
  }

  .arrow {
    z-index: 111;
    position: absolute;
    right: 25px;
    top: 13px;
    background: url('../../../static/images/zhishi.png') no-repeat;
    width: 54px;
    height: 87px;
    background-size: cover;
  }

  .cancel {
    font-size: 18px;
    text-decoration: underline;
    position: absolute;
    bottom: 3.66rem;
    left: 50%;
    padding: 20px;
    transform: translateX(-50%);
  }


</style>
